﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="WebFormDev.WebForm3" %>

<%@ Register Assembly="DevExpress.Web.v11.2, Version=11.2.5.0, Culture=neutral, PublicKeyToken=e10463e7b0d83b80"
    Namespace="DevExpress.Web.ASPxTabControl" TagPrefix="dx" %>
<%@ Register Assembly="DevExpress.Web.v11.2, Version=11.2.5.0, Culture=neutral, PublicKeyToken=e10463e7b0d83b80"
    Namespace="DevExpress.Web.ASPxClasses" TagPrefix="dx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script>
        $(document).ready(function () {
            
            $("#xxx").click(function () {
                var color = $("#ASPxPageControl1_CC").css("border-right-color");
                var i = ASPxPageControl1.tabs.length;
                var p = ["name", undefined, undefined, undefined];
                var trHeader = $("#ASPxPageControl1_SVA > table > tbody > tr");
                var dxtcTab = trHeader.find("[class*='dxtcTab']").last().clone();
                var dxtcActiveTab = trHeader.find("[class*='dxtcActiveTab']").last().clone();
                dxtcTab.attr("id", "ASPxPageControl1_T" + i);
                dxtcTab.find("td").attr("id", "ASPxPageControl1_T" + i + "T").text(p[0]);
                dxtcTab.removeAttr("onclick");
                dxtcTab[0].onclick = function (event) {
                    ASPxPageControl1.ChangeActiveTab($(this).attr("id").replace("ASPxPageControl1_T", ""), false);
                };
                dxtcActiveTab.attr("id", "ASPxPageControl1_AT" + i);
                dxtcActiveTab.find("td").attr("id", "ASPxPageControl1_AT" + i + "T").text(p[0]);

                var split = $('<td style="width:1px;border-bottom-color:' + color + ';border-bottom-style:Solid;border-bottom-width:1px;" id="ASPxPageControl1_T' + (i - 1) + 'S"><div style="height:1px;width:3px;overflow:hidden;"></div></td>');
                trHeader.find("td:last").before(split).before(dxtcTab).before(dxtcActiveTab);
                $("#ASPxPageControl1_CC").append("<div style='display: none;' id='ASPxPageControl1_C" + i + "'>" + Math.random() + "</div>");
                
                var tab = new ASPxClientTab(dxo, i, p[0]);
                ASPxPageControl1.CreateTabProperties(tab, p);
                ASPxPageControl1.tabs.push(tab);
                //ASPxPageControl1.tabCount = dxo.tabs.length;
                ASPxPageControl1.SetActiveTab(tab);
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input type="button" id="xxx" />
    <dx:ASPxPageControl ID="ASPxPageControl1" runat="server" ActiveTabIndex="0" Width="500px"
        EnableTabScrolling="True" TabAlign="Center">
        <TabPages>
            <dx:TabPage>
                <ContentCollection>
                    <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    </dx:ContentControl>
                </ContentCollection>
            </dx:TabPage>
            <dx:TabPage>
                <ContentCollection>
                    <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    </dx:ContentControl>
                </ContentCollection>
            </dx:TabPage>
            <dx:TabPage>
                <ContentCollection>
                    <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    </dx:ContentControl>
                </ContentCollection>
            </dx:TabPage>
        </TabPages>
    </dx:ASPxPageControl>
    <dx:ASPxPageControl ID="ASPxPageControl2" runat="server" ActiveTabIndex="0" Width="30px"
        EnableTabScrolling="True" TabAlign="Center">
        <TabPages>
            <dx:TabPage>
                <ContentCollection>
                    <dx:ContentControl runat="server" SupportsDisabledAttribute="True">
                    </dx:ContentControl>
                </ContentCollection>
            </dx:TabPage>
        </TabPages>
    </dx:ASPxPageControl>
    </form>
</body>
</html>
